<template>
    <div class="person">
        <!-- <h2>{{ a }}</h2> -->
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }} {{ item.age }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
import { type Persons } from '@/types'
import { withDefaults } from 'vue'

// defineProps(['a']) // 接受 a
// console.log(a);

// let x = defineProps(['a']) // 接收 a,同时将 props 保存起来
// console.log(x.a);

// defineProps(['list']) // 只接收 list

// defineProps<{ list: Persons }>() // 接收 list + 类型限制


withDefaults(defineProps<{ list?: Persons }>(), {
    list: ()=>[{ id: '10', name: '康师傅', age: 77 }]
}) // 接收 list + 类型限制 + 限制必要性 + 指定默认值
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>
